<template>
  <Form
    ref="analysisForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    :label-width="100"
    inline>
    <!-- <FormItem prop="ctime" style="width: 250px; margin-left: -20px" label="创建日期：">
      <DatePicker v-model="form.ctime" type="date" placeholder="请输入创建日期"></DatePicker>
    </FormItem>
    <FormItem prop="uname" style="width: 250px; margin-left: -20px" label="客户姓名：">
      <Input type="text" v-model="form.uname" placeholder="请输入客户姓名" />
    </FormItem>
    <FormItem prop="tel" style="width: 250px; margin-left: -20px" label="客户电话：">
      <Input type="text" v-model="form.tel" placeholder="请输入客户电话" />
    </FormItem>
    <FormItem prop="appointime" style="width: 250px; margin-left: -20px" label="预约日期：">
      <DatePicker v-model="form.appointime" type="datetime" placeholder="请输入预约日期"></DatePicker>
    </FormItem>
    <FormItem prop="comdate" style="width: 250px; margin-left: -20px" label="到店日期：">
      <DatePicker v-model="form.comdate" type="datetime" placeholder="请输入到店日期"></DatePicker>
    </FormItem>
    <FormItem prop="state" label="状态：" style="width: 230px; margin-left: -50px">
      <Select v-model="form.state">
        <Option value="all">
          全部
        </Option>
        <Option value="0">
          未预约
        </Option>
        <Option value="1">
          已预约
        </Option>
        <Option value="2">
          未到访
        </Option>
        <Option value="3">
          已到店
        </Option>
        <Option value="4">
          已签约
        </Option>
        <Option value="5">
          已退款
        </Option>
      </Select>
    </FormItem> -->
    <Row>
      <Col :md="8" :lg="4">
        <FormItem prop="state0" label="跟踪状态：">
          <Select v-model="form.state0">
            <Option value="all">
              全部
            </Option>
            <Option value="0">
              有效
            </Option>
            <Option value="1">
              流失
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="repeat" label="重复客户：">
          <Select v-model="form.repeat" :disabled="form.buyState !== 'all' || form.unSignState !=='all'">
            <Option value="all">
              无
            </Option>
            <Option value="3">
              多次到店
            </Option>
            <Option value="4">
              多次购买
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="6">
        <FormItem prop="buyState" label="购买状态：">
          <Select v-model="form.buyState" :disabled="form.repeat !== 'all' || form.unSignState !=='all'">
            <Option value="all">
              无
            </Option>
            <Option value="1">
              一个月内购买
            </Option>
            <Option value="3">
              三个月内购买
            </Option>
            <Option value="6">
              半年内购买
            </Option>
            <Option value="2">
              半年以前购买
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="6">
        <FormItem prop="unSignState" label="未签约状态：">
          <Select v-model="form.unSignState" :disabled="form.buyState !== 'all' || form.repeat !=='all'">
            <Option value="all">
              无
            </Option>
            <Option value="1">
              一个月内未签约
            </Option>
            <Option value="3">
              三个月内未签约
            </Option>
            <Option value="6">
              半年内未签约
            </Option>
            <Option value="2">
              半年以前未签约
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="3" style="text-align: right">
        <Button @click="handleSubmit" icon="md-search" type="primary">
          搜索
        </Button>
      </Col>
    </Row>

    <!-- <FormItem prop="type" label="结算方式：" style="width: 250px">
      <Select v-model="form.type" clearable>
        <Option value="all">
          全部
        </Option>
        <Option value="0">
          口碑结算
        </Option>
        <Option value="1">
          到店结算
        </Option>
        <Option value="2">
          成交结算
        </Option>
        <Option value="4">
          销售素材
        </Option>
      </Select>
    </FormItem> -->
    <!-- <FormItem prop="state" label="开启方式：" style="width: 250px">
      <Select v-model="form.state" clearable>
        <Option value="all">
          全部
        </Option>
        <Option value="0">
          关闭
        </Option>
        <Option value="1">
          开启
        </Option>
      </Select>
    </FormItem> -->
  </Form>
</template>
<script>
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  name: 'AnalysisForm',
  props: {
    title: '',
    ctimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    unameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    telRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      statearr: '0,1,2,3,4,5',
      form: {
        ctime: '',
        uname: '',
        tel: '',
        mname: 'all',
        appointime: '',
        comdate: '',
        state: 'all',
        state0: 'all',
        repeat: 'all',
        unSignState: 'all',
        buyState: '1'
      }
    }
  },
  computed: {
    rules () {
      return {
        ctime: this.ctimeRules,
        uname: this.unameRules,
        tel: this.telRules,
        mname: this.nameRules,
        appointime: this.ctimeRules,
        comdate: this.ctimeRules,
        state: this.stateRules
      }
    }
  },
  methods: {
    handleSubmit () {
      if (this.form.buyState === 'all' && this.form.repeat === 'all' && this.form.unSignState === 'all') {
        this.form.buyState = '1'
      }
      this.$refs.analysisForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            // ctime: this.form.ctime ? this.$moment(this.form.ctime).format('YYYY-MM-DD') : '',
            // uname: this.form.uname,
            // tel: this.form.tel,
            // muid: this.form.mname !== 'all' ? this.form.mname : '',
            // appointime: this.form.appointime ? this.$moment(this.form.appointime).format('YYYY-MM-DD HH:mm:ss') : '',
            // comdate: this.form.comdate ? this.$moment(this.form.comdate).format('YYYY-MM-DD HH:mm:ss') : '',
            // state: this.form.state && this.form.state !== 'all' ? parseInt(this.form.state) : '',
            // statearr: this.form.state === 'all' ? this.statearr : '',
            state0: this.form.state0 && this.form.state0 !== 'all' ? parseInt(this.form.state0) : '',
            repeat: this.form.repeat && this.form.repeat !== 'all' ? parseInt(this.form.repeat) : '',
            buyState: this.form.buyState && this.form.buyState !== 'all' ? parseInt(this.form.buyState) : '',
            unSignState: this.form.unSignState && this.form.unSignState !== 'all' ? parseInt(this.form.unSignState) : ''
          })
        }
      })
    }
  }
}
</script>
